<template>
	<view>
		<view v-if="showData.magicSquare" <view class="magic-square-view"
			>
			<view v-for="(item, index) in showData.magicSquare" :key="index" class="magic-square-view-content"
				:style="{ 'width':`${(magicSquareViewBoxWidth - showData.styleMargin) / showData.widthNum * item.widthNum}rpx`,'height':`${(showData.height - showData.styleMargin) / showData.widthNum * item.heightNum}px`,'top':`${item.yInx * (showData.height - showData.styleMargin) / showData.widthNum}px`,'left':`${item.xInx * (magicSquareViewBoxWidth - showData.styleMargin) / showData.widthNum}rpx`,margin:`${showData.styleMargin}px`}">
				<view :style="{'padding':`${showData.stylePadding}px`}" class="magic-square-image-box" @tap="toPage(item.linkUrl)">
					<view v-if="item.image != ''" class="image-view-box"
						:style="{ backgroundImage: `url(${item.image})` }">
					</view>
					<view v-else class="image-view-box">
						图片
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import {
		toJumpUrl,
	} from '@/utils/index.js';
	export default {
		props: {
			showData: {
				type: Object,
				default: () => {}
			},
		},
		data() {
			return {
				magicSquareViewBoxWidth: 750,
				onemagicSquareViewBoxWidth: 0
			}
		},
		methods: {
			toPage(jumpUrl) {
				console.log(jumpUrl)
				toJumpUrl(jumpUrl);
			},
		}
	}
</script>

<style scoped lang="scss">
	.magic-square-view {
		position: relative;
		min-height: 26px;
		margin: 0 auto;
	}

	.magic-square-view-content {
		position: absolute;
		background-color: #fff;
		box-sizing: border-box;
	}

	.magic-square-image-box {
		position: relative;
		height: 100%;

		.image-view-box {
			position: relative;
			overflow: hidden;
			display: flex;
			justify-content: center;
			align-items: center;
			background-position: center;
			background-size: cover;
			background-repeat: no-repeat;
			font-size: 12px;
			height: 100%;
		}
	}

	.empty-data {
		height: 200px;
		display: flex;
		justify-content: center;
		align-items: center;
		font-size: 20px;

	}
</style>
